<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form ref="filmads" :model="filmads" label-width="80px" v-loading.screen.lock='fullScreenlock'>
                <el-form-item label="广告标题">
                    <el-input v-model="filmads.title" class="input_width"></el-input>
                </el-form-item>
                <el-form-item label="广告图">
                    <el-upload class="avatar-uploader" :action="getLocation" :show-file-list="false" :data="pic" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="filmads.img_url" :src="ip+filmads.img_url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="tips">建议尺寸：640×320像素</span>
                </el-form-item>
                <el-form-item label="播放时长" prop="content">
                    <el-input v-model="filmads.duration" style="width:20%"></el-input> 秒
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add">立即创建</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { pic_location, ip } from '../../utils/local.js'
import { addBanner, putBanner } from '../../api/server.js'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            getLocation: pic_location,
            fullScreenlock: false,
            pic: {},
            ip: ip
        }
    },
    created() {
        this.getLocation = pic_location
    },
    computed: mapState({
        filmads: state => state.Film.filmAds
    }),
    methods: {
        upload(file) {
            this.fullScreenlock = true
        },
        handleAvatarSuccess(res) {
            if (res.code === '000000') {
                this.fullScreenlock = false
                this.filmads.img_url = res.result.filePath
            }
        },
        beforeAvatarUpload(file) {
            this.pic.pictureFile = file
            return this.upload(file)
        },
        add() {
            let filmads = this.filmads
            filmads.imgUrl = filmads.img_url
            console.log('fileads', filmads)
            if (filmads.id) {
                putBanner(filmads)
                    .then(res => {
                        this.$message.success('修改成功')
                    })
            } else {
                addBanner(filmads)
                    .then(res => {
                        this.$message.success('添加成功')
                    })
            }
        },

        back() {
            this.$router.go(-1)
        }
    },
    mounted() {

    },
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}
.avatar-uploader {
  width: 640px;
  height: 320px;
  border: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader .el-upload {
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 640px;
  height: 320px;
  display: block;
}
.input_width {
  width: 30%;
}
// .ql-video {
//   disabled: none;
// }
.tips {
  color: grey;
  margin-left: 25%;
}
</style>